<template>
	<swiper v-if="list.length > 2" class="hotSwiper" next-margin="300rpx">
		<swiper-item class="hotSwiperItem" :class="index == 0 ? 'yellowBg' : 'whiteBg'" :key="index" v-if="index < 2" v-for="(item, index) in hotList">
			<view class="hotTitle">{{ index == 0 ? '热播榜' : '新剧榜' }}</view>
			<view class="hotItem" @click="toDetail(swiperItem, 'hot')" v-for="(swiperItem, swiperIndex) in item">
				<view class="hotLeft">
					<image style="width: 143rpx;height: 179rpx;border-radius: 13rpx;overflow: hidden;margin-left: 37rpx;" :src="swiperItem.coverImgUrl"></image>
				</view>
				<view class="hotRight" style="margin-left: 29rpx;width: 80%;">
					<view class="hotRightLine">
						<image
							v-if="swiperItem.index < 6"
							style="width: 35rpx;height: 41rpx;margin-right: 9rpx;"
							:src="'https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/icon_' + swiperObj[swiperItem.index] + '.png'"
						></image>
						<view class="clamp" style="font-size:30rpx;font-weight: bold;color:#333333;width: 80%;">{{ swiperItem.title }}</view>
					</view>
					<view style="font-size: 26rx;color: #999999;margin-bottom: 17rpx;margin-top: 10rpx;" class="hotRightLine">{{ swiperItem.laikanAccountName }}</view>
					<view style="font-size: 26rpx;color: #333333;" class="hotRightLine">
						{{ swiperItem.finish ? '已完结共' + swiperItem.updateOfEpisodes + '集' : '更新至第' + swiperItem.updateOfEpisodes + '集' }}
					</view>
				</view>
			</view>
		</swiper-item>
	</swiper>
</template>

<script>
	export default {
		props:{
			list:{
				default:()=>{
					return []
				},
				type:Array
			}
		},
		data() {
			return {
				jjIdObj: {},
				swiperObj: { 0: 0, 1: 1, 2: 2, 3: 0, 4: 1, 5: 2 },
				hotList: []
			}
		},
		methods: {
			toDetail(item, type) {
				if (type == 'mayLike') {
					this.$uma && this.$uma.trackEvent('Ume_skip', {
						name: 'Ume_skip_page1_like'
					});
				} else if (type == 'hot') {
					this.$uma && this.$uma.trackEvent('Ume_skip', {
						name: 'Ume_skip_page1_hot'
					});
				}
				console.log('item', item);
				this.zwyRouter(`../video/video?fakeId=${item.fakeId}&compilationId=${item.compilationId}`);
			},
			sendUme(type) {
				console.log('type', type);
				if (!this.jjIdObj[type]) {
					this.jjIdObj[type] = true;
					this.$uma && this.$uma.trackEvent('Ume_ex_PV', {
						name: 'Umk_page1_hot'
					});
				}
			},
			getBannerList() {
				let res = this.list;
				console.log('hotList',res);
				let tempList = (res || []).map((item, index) => {
					item = item.contentInfo;
					item['index'] = index;
					return item;
				});
				console.log('tempList',tempList);
				let tempDramaList = [];
				for (let i = 0; i < Math.ceil(tempList.length / 3); i++) {
					let nowJ = 3 * i;
					let nextJ = 3 * (i + 1);
					let temp = [];
					for (let j = nowJ; j < nextJ; j++) {
						if (tempList[j]) temp.push(tempList[j]);
					}
					tempDramaList.push(temp);
				}
				this.hotList = tempDramaList;
				this.observer.observe('.hotSwiper', res => {
					if (res.intersectionRatio > 0.8) {
						this.sendUme('hot');
					}
				});
				this.$forceUpdate();
				
				console.log('hotList',this.hotList);
				
				return;
				
				this.zwyRequest({
					url: '/cdp/index/compilations/hot_sale',
					noErr: true
				}).then(res => {
					console.log('related', res);
					if (res) {
						let tempList = res.map((item, index) => {
							item['index'] = index;
							return item;
						});
						let tempDramaList = [];
						for (let i = 0; i < Math.ceil(tempList.length / 3); i++) {
							let nowJ = 3 * i;
							let nextJ = 3 * (i + 1);
							let temp = [];
							for (let j = nowJ; j < nextJ; j++) {
								if (tempList[j]) temp.push(tempList[j]);
							}
							tempDramaList.push(temp);
						}
						this.hotList = tempDramaList;
						this.observer.observe('.hotSwiper', res => {
							if (res.intersectionRatio > 0.8) {
								this.sendUme('hot');
							}
						});
						this.$forceUpdate();
					}
				});
			},
		},
		onReady() {
			if (this.createIntersectionObserver) {
				this.observer = this.createIntersectionObserver({
					thresholds: [0.2, 0.8]
				}).relativeToViewport();
			}
			this.getBannerList();
		},
		created() {
		}
	}
</script>

<style lang="scss" scoped>
	.yellowBg {
		background-image: url('https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/bg_0.png');
	}
	.whiteBg {
		background-image: url('https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/bg_1.png');
	}
	.hotSwiper {
		.hotSwiperItem {
			.hotRightLine {
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}
			.hotTitle {
				margin-top: 21rpx;
				font-weight: bold;
				color: #181818;
				font-size: 32rpx;
				margin-left: 37rpx;
				margin-bottom: 27rpx;
			}
			.hotItem {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				margin-bottom: 24rpx;
			}
			margin-left: 17rpx;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center center;
			width: 470rpx;
		}
		margin-bottom:30rpx ;
		height: 710rpx;
		width: 100vw;
	}
</style>
